<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>渐变</title>
	<style>
		.linear-gradient {
			width: 100px;
			height: 100px;
			background: linear-gradient(to bottom, blue, transparent)
		}

		code {
			background: #f5f5f5;
			padding: 5px;
		}
	</style>
</head>
<body>
	<h1>线性渐变</h1>
	<div class="linear-gradient"></div>
	<code>background: linear-gradient(to bottom, blue, transparent)</code>

	<div class="linear-gradient" style="background: linear-gradient(0deg, blue, transparent)">
		0deg
	</div>
	<div class="linear-gradient" style="background: linear-gradient(70deg, blue, transparent)">
		70deg
	</div>
	<div class="linear-gradient" style="background: linear-gradient(170deg, blue, transparent)">
		170deg
	</div>
	<div class="linear-gradient" style="background: linear-gradient(270deg, blue, transparent)">
		270deg
	</div>

	<div class="linear-gradient" style="width: 100%; background: linear-gradient(90deg,  hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%))">
		90deg
	</div>
	<code>background: linear-gradient(90deg,  #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)</code>

	<h2>径向渐变</h2>
	<div class="linear-gradient" style="background: radial-gradient(red, rgb(250,250,0), transparent);">
	</div>
	<div class="linear-gradient" style="background: radial-gradient(red 10%, rgb(250,250,0) 40%, transparent) 70%;">
	</div>
	<code>background: radial-gradient(red 10%, rgb(250,250,0) 40%, transparent) 70%;</code>


	<h3>参考</h3>
	<a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients">使用CSS渐变</a>
</body>
</html>